<script setup lang="ts">
import { ref, watch } from 'vue'
import {
  sodiumHydroxidePage,
  pigIntestinePage,
  resinPage,
  heparinPage,
  proteasePage,
  intestinalSaltPage,
  alcoholPage
} from '../../api/index'
const props = withDefaults(defineProps<{ ledgerConfig: any; visibleModel: boolean }>(), {
  ledgerConfig: {}, // 父组件传入点击数据
  visibleModel: false
})
const emits = defineEmits<{ (e: 'closed'): void }>()
let parmas = {
  pageNum: 1,
  pageSize: 10
}
let currentPage = ref(1)
let total = ref(0)
watch(
  () => props.ledgerConfig,
    (newData) => {
    console.log(newData.type,'newData.type');
    
    if (newData.type === 'sodiumHydroxidePage') {
      getGodiumHydroxidePage()
    } else if (newData.type === 'resinPage') {
      getResinPage()
    } else if (newData.type === 'pigIntestinePage') {
      getPigIntestinePage()
    } else if (newData.type === 'heparinPage') {
      getHeparinPage()
    } else if (newData.type === 'proteasePage') {
      getProteasePage()
    } else if (newData.type === 'intestinalSaltPage') {
      getIntestinalSaltPage()
    } else if (newData.type === 'alcoholPage') {
      getAlcoholPage()
    }
  }
) // 监听数据变化，依据父组件传入数据改变展示数据
const tableData: any = ref([])
/*  氢氧化钠台账*/
const getGodiumHydroxidePage = async () => {
  let res: any = await sodiumHydroxidePage(parmas)
  tableData.value = res.rows
  total.value = res.total
}
/*  猪小肠台账*/
const getPigIntestinePage = async () => {
  let res: any = await pigIntestinePage(parmas)
  tableData.value = res.rows
  total.value = res.total
}
/*  肝素钠台账*/
const getHeparinPage = async () => {
    let res: any = await heparinPage(parmas)
  
  tableData.value = res.rows
    total.value = res.total
    
}
/*  碱性蛋白酶台账*/
const getProteasePage = async () => {
  let res: any = await proteasePage(parmas)
  tableData.value = res.rows
  total.value = res.total
}
/*  肠衣盐台账*/
const getIntestinalSaltPage = async () => {
  let res: any = await intestinalSaltPage(parmas)
  tableData.value = res.rows
  total.value = res.total
}
/*  酒精台账*/
const getAlcoholPage = async () => {
  let res: any = await alcoholPage(parmas)
  tableData.value = res.rows
  total.value = res.total
}
/*  树脂台账*/
const getResinPage = async () => {
  let res: any = await resinPage(parmas)
  tableData.value = res.rows
  total.value = res.total
}
const handleCurrentChange = (val: number) => {
  parmas.pageNum = val
  if (props.ledgerConfig.type === 'sodiumHydroxidePage') {
    getGodiumHydroxidePage()
  } else if (props.ledgerConfig.type === 'resinPage') {
    getResinPage()
  } else if (props.ledgerConfig.type === 'pigIntestinePage') {
    getPigIntestinePage()
  } else if (props.ledgerConfig.type === 'heparinPage') {
    getHeparinPage()
  } else if (props.ledgerConfig.type === 'proteasePage') {
    getProteasePage()
  } else if (props.ledgerConfig.type === 'intestinalSaltPage') {
    getIntestinalSaltPage()
  } else if (props.ledgerConfig.type === 'alcoholPage') {
    getAlcoholPage()
  }
}
function handleClose() {
  parmas.pageNum = 1
  emits('closed')
}
</script>
<template>
  <div class="ledger-List" v-if="visibleModel">
    <div class="ledger-List-header">
      <div class="ledger-List-title">
        {{ props.ledgerConfig.name }}
      </div>
      <img class="close-Outlined" src="@/assets/img/closeOutlined.png" alt="" @click="handleClose" />
    </div>
    <div class="ledger-List-table">
      <el-table :data="tableData" class="custom-table" header-row-class-name="custom-table" height="100%">
       
         <!-- 肝素钠台帐 -->
         <template v-if="props.ledgerConfig.type === 'heparinPage'">
          <el-table-column prop="batchNum" label="批号" />
          <el-table-column prop="productionDate" label="生产日期" />
          <el-table-column prop="processingNum" label="小肠加工数量" />
          <el-table-column prop="grossWeight" label="毛重（g）" />
          <el-table-column prop="netWeight" label="净重（g）" />
          <el-table-column prop="potency" label="效价" />
          <el-table-column prop="billionCount" label="亿数" />
          <el-table-column prop="averageValue" label="平均" />
        </template>
        <!-- 猪小肠台账 -->
           <template v-else-if="props.ledgerConfig.type === 'pigIntestinePage'">
          <el-table-column prop="purchaseDate" label="采购日期" />
          <el-table-column prop="purchaseNum" label="采购数量/根" />
          <el-table-column prop="purchaseUnit" label="单位" />
          <el-table-column prop="inboundNum" label="入库数量/根" />
          <el-table-column prop="balanceNum" label="结存数量/根" />
          <el-table-column prop="purchaseUnit" label="采购单位" />
          <el-table-column prop="balanceNum" label="剩余根数" />
        </template>
        <!-- 其他台账 -->
        <template v-else="props.ledgerConfig.type === 'sodiumHydroxidePage'||props.ledgerConfig.type === 'resinPage'||props.ledgerConfig.type === 'proteasePage'">
          <el-table-column prop="date" label="日期" />
          <el-table-column prop="num" label="采购数量" />
          <el-table-column prop="supplier" label="单位" />
          <el-table-column prop="inboundNum" label="入库数量" />
          <el-table-column prop="outboundNum" label="出库数量" />
          <el-table-column prop="currentNum" label="结存数量" />
          <el-table-column prop="unitPrice" label="采购单位" />
          <el-table-column prop="date" label="备注" />
        </template>
      
        
      </el-table>
    </div>
    <el-pagination
      v-model:current-page="currentPage"
      size="small"
      background
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :total="total"
      class="pagination"
    />
  </div>
</template>
<style scoped lang="scss">
.ledger-List {
  padding: 2%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  min-width: 60%;
  min-height: 60%;
  max-height: 80%;
  background: #1d375c;
  z-index: 99;
  display: flex;
  flex-direction: column;

  .ledger-List-header {
    width: 100%;

    height: 4.8%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .ledger-List-title {
      padding-left: 0.8%;
      width: 348px;
      height: 36px;
      background-size: cover;
      background-image: url('@/assets/img/ledgerListTitle.png');
      font-size: 20px;
      text-align: left;
      line-height: 200%;
    }

    .close-Outlined {
      width: 28px;
      height: 28px;
    // height: 100%;
      cursor: pointer;
    }
  }

  .ledger-List-table {
    flex: 1 !important;
    padding: 26px 20px;
    box-sizing: border-box;
    max-height: calc(100% - 100px);
    overflow-y: auto;

    .custom-table {
      background-color: #1d375c;
    }
    :deep(.el-table) {
      --el-table-border-color: #1d375c;
    }
    :deep(.el-table tr),
    :deep(.el-table th.el-table__cell) {
      background-color: #1d375c !important;
      color: #fff;
    }
    :deep(.el-table tbody tr:hover > td) {
      background-color: #1d375c !important; //修改成自己想要的颜色即可
    }
    :deep(.el-table__row > td) {
      border: none !important;
    }
    :deep(.el-table__header) {
      border-bottom: 1px solid #fff;
    }
  }
  .pagination {
    background-color: #1d375c !important ;
    position: absolute;
    bottom: 26px;
    right: 44px;
    .el-pager {
      :deep(.num) {
        margin-left: 10px !important;
      }
    }
  }
}
</style>
